<template>
    <router-link class="img-item" tag="li" :to="`${path}/${song.id}`">
            <img :src="song.picUrl"/>
            <span class="icon">{{song.playCount | formatNum}}</span>
            <h5>{{song.name}}</h5>
    </router-link>
</template>
<script>
export default {
  props: {
    song: {
      type: Object,
      default: function () {
        return {}
      }
    },
    // palylist路径
    path: {
      type: [String, Number],
      require: true
    }
  }
}
</script>
<style lang="less" scoped>
.img-item{
    width:33%;
    color:#333;
    margin-bottom:16px;
    position: relative;
    img{
        width:100%;
        display: block;
    }
    .icon{
        position: absolute;
        z-index:2;
        top:0px;
        right:10px;
        color:white;
        font-size:12px;
        background:no-repeat url();
        background-position: left center;
        background-size:13px 12px;
        padding:2px 0px 0px 14px;
    }
    h5{
        font-size: 14px;
        display: -webkit-box;  //设置box显示方式
        -webkit-line-clamp: 2; //两行
        -webkit-box-orient: vertical; //垂直
        overflow: hidden;
    }
}
</style>
